<template>
  <div>
    <el-card class="m-t-15 box-card">

      <div slot="header" class="flex-cls-nowrap-spc-btw">
        <span>表格组件 (行内编辑 + 简单导出)</span>
      </div>

      <!-- 查询条件 -->
      <div ref="searchForm">
        <m-form
          inline
          is-button
          form-type="search"
          :options="searchForm.options"
          :all-btn="searchForm.btnList"
          @save="search"
        />
      </div>

      <!-- 全局按钮 -->
      <m-all-btn class="m-b-10" :button-list="overallBtn" />

      <!-- 表格 -->
      <m-table
        v-loading="dataGrid.loading"
        :height="dataGrid.height"
        :list="dataGrid.data"
        :columns="dataGrid.columns"
        :pagination="dataGrid.pagination"
      >

        <!-- 表格中的按钮 -->
        <template #action="scope">
          <m-all-btn :button-list="tableBtn" :scope="scope" />
        </template>

        <template #incomingModel="{scope}">
          <template v-if="scope.row.edit">
            <el-input
              v-model="scope.row.incomingModel"
              v-focus
              size="mini"
              style="width:100px;"
              @blur="()=> saveChangeData(scope.row,scope.$index)"
            />
          </template>
          <div v-else @dblclick="changeEditType(scope.row,scope.$index)">
            <span>{{ scope.row.incomingModel }}</span>
          </div>
        </template>

      </m-table>
    </el-card>

    <!-- 弹框表单 -->
    <m-modal-form
      width="680px"
      :close-on-click-modal="false"
      :title="formProperty.formType !== 'add' ? formProperty.title[0] :formProperty.title[1]"
      :visible.sync="formProperty.visible"
      :form-type="formProperty.formType"
      :form-attrs="formProperty.formAttrs"
      :options="formProperty.options"
      :is-btn-text="formProperty.isBtnText"
      @save="saveForm"
    />

  </div>
</template>
<script>

// 混入 minxin 文件夹下面所有的js文件
const files = require.context("./mixins", false, /\.js$/);
const minxins = [];
files.keys().forEach(key => {
  minxins.push(files(key).default || files(key));
});

import { focus } from "@/directive/focus";

export default {
  name: "UseDataGrid",
  directives: { focus },
  mixins: [...minxins],
  created() {
    let sum = 6000;
    for (let i = 0; i < 35; i++) {
      sum = sum + (sum * 0.03);
    }
    console.log(sum, "sumsum");
  },
  methods: {
    changeEditType(row, key) {
      row.edit = true;
      this.dataGrid.data.forEach((item, index) => {
        if (index !== key) {
          item.edit = false;
        }
      });
    },
    saveChangeData(row, index) {
      this.dataGrid.data[index] = row;
      this.dataGrid.data[index].edit = false;
      this.$message.success("修改成功");
    }
  }
};
</script>
